<template>
  <el-dialog width="66%" :title="formData.billNumber" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <printPreview ref="printPreview" :tableData="formData.detailsList" :tableProps="tableProps" :printFrom="printFrom">
    </printPreview>
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item v-if="formData.stageStatus === 1">
        <template #label> 预计归还日期 </template>
        {{ formData.planBackDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 接收人 </template>
        {{ formData.recipient }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label> 接收人电话 </template>
        {{ formData.recipientPhone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label> 用途 </template>
        {{ formData.purpose }}
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="formData.detailsList" border style="width: 100%; margin-top: 20px" max-height="20vh">
      <el-table-column v-if="labelType === 0" prop="archiveNo" label="档号" width=""></el-table-column>
      <el-table-column v-if="labelType === 0" prop="archiveName" label="题名" width=""></el-table-column>
      <el-table-column v-if="labelType === 1" prop="boxNo" label="盒号" width=""></el-table-column>
      <el-table-column v-if="labelType === 1" prop="boxName" label="盒名" width=""></el-table-column>
      <el-table-column prop="positionName" label="位置" width=""></el-table-column>
      <el-table-column prop="rfid" label="RFID" width=""></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="printInBIll" size="mini" type="primary">打印出库单</el-button>
      <el-button v-if="type === 'confirm'" @click="confirmOut" size="mini" type="primary">确认出库</el-button>
      <el-button v-if="type === 'confirm'" @click="refuseOut" size="mini" type="danger">拒绝出库</el-button>
      <el-button @click="closeDialog" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDetail, confirmOut, refuseOut } from '@/api/rfid/outBill'
import printPreview from '@/components/printPreview.vue'

export default {
  name: 'outBillDialog',
  components: {
    printPreview,
  },
  data() {
    return {
      type: '',
      labelType: '',
      dialogVisible: false,
      formData: {},
      formDisabled: false,
      formRules: {},
      printFrom: [],
      tableProps: [],
    }
  },
  created() { },
  methods: {
    // 打印单据
    printInBIll() {
      this.printFrom = [
        {
          name: '预计归还日期',
          data: this.formData.planBackDate,
        },
        {
          name: '接收人',
          data: this.formData.recipient,
        },
        {
          name: '接收人电话',
          data: this.formData.recipientPhone,
        },
        {
          name: '用途',
          data: this.formData.purpose,
        },
      ]
      if (this.labelType === 0) {
        this.tableProps = [
          { title: '档号', prop: 'archiveNo', width: '', checked: true },
          { title: '题名', prop: 'archiveName', width: '', checked: true },
          { title: '位置', prop: 'positionName', width: '', checked: true },
        ]
      } else {
        this.tableProps = [
          { title: '盒号', prop: 'boxNo', width: '', checked: true },
          { title: '盒名', prop: 'boxName', width: '', checked: true },
          { title: '位置', prop: 'positionName', width: '', checked: true },
        ]
      }
      this.$refs.printPreview.open()
    },
    confirm(row) {
      this.type = 'confirm'
      this.labelType = row.labelType
      this.formDisabled = true
      getDetail(row.billNumber)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data
            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    show(row) {
      this.type = 'show'
      this.labelType = row.labelType
      this.formDisabled = true
      getDetail(row.billNumber)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data
            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    confirmOut() {
      confirmOut({ billNumber: this.formData.billNumber })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success('出库成功')
            this.closeDialog()
            this.$emit('ok')
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    refuseOut() {
      this.$prompt('请输入拒绝理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          this.formData.reason = value
          refuseOut(this.formData).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('拒绝出库成功')
              this.closeDialog()
              this.$emit('ok')
            } else {
              this.$message.warning(res.data.message)
            }
          })
        })
        .catch((error) => {
          if (error === 'cancel') {
            // 用户点击了取消按钮，可以在此处添加相应处理逻辑
          } else {
            // 其他错误情况，例如网络错误等
            this.$message.error(error)
          }
        })
    },
    closeDialog() {
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.dialog-form {
  padding: 0 30px;
  /* 根据需求调整数值 */
}

.el-table {
  display: flex;
  flex-direction: column;
}

.el-table__header-wrapper {
  overflow: unset;
}
</style>
